import react from "react"
import ReactDom from "react-dom"
function stateHooks() {
    // 使用react.useState初始化一个值，这个方法会返回一个数组，数组第一位是要定义的值，第二个是修改这个值得函数
    const [count, setCount] = react.useState(0)
    const [name, setName] = react.useState('Tome')

    /**
     * react.useEffect 方法接收两个参数
     * 1.函数
     * 2.要监听的useState定义的stateValue，如果不传递第二个参数，则默认监听全部value
     *  如果传入一个空数组，则不会监听任何stateValue值得改变
     *  如果定义个某个stateValue，则只会监听这个值得变化
     */
    react.useEffect(() => {
        let timer = setInterval(() => {
            setCount(count=>count+1)
        }, 1000);
        // 返回的方法可以当做 componentWillUnmount 钩子
        return ()=>{
            // 在卸载组件前清除定时器
            clearInterval(timer)
        }
    }, [])

    // 点击加1按钮调用setCount方法，传入一个新的值来修改初始化的值
    // 在第一次useState后回缓存count，点击修改会重新调用当前的函数，但是不会更改count的值
    function add() {
        // 修改函数的两种写法之一
        setCount(count + 1)
    }
    function changeName() {
        /**
         * 修改函数的两种写法之二
         * 传入一个函数，这个函数会接受到之前的值，然后返回新的值覆盖之前的值
         */
        setName(preName => preName = 'Juar')
    }

    function unmont(){
        ReactDom.unmountComponentAtNode(document.getElementById('root'))
    }
    return (
        <div>
            <h2>当前的数据和为：{count}</h2>
            <h3>我的名字是：{name}</h3>
            <button onClick={add}>点我+1</button>
            <button onClick={changeName}>修改名字</button>
            <button onClick={unmont}>卸载组件</button>
        </div>
    )
}

export default stateHooks